<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转地图</title>
	<script type="text/javascript"
					src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=KzmFqkWUs9MbKNwQqLUeCWF8giEWZnox">
	</script>
	<style type="text/css">
		body, html, #allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}

		#allmap {
			position: relative;
		}

		#tools {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1000;
		}

		.tools-bar {
			display: flex;
		}

		.label {
			width: 80px;
			text-align: right;
		}
	</style>
</head>
<body>
<div id="allmap"></div>
<div id="tools">
	<div class="tools-bar">
		<div class="label">heading:</div>
		<button id="heading-add">+</button>
		<input type="text" id="heading" value="40">
		<button id="heading-minus">-</button>
	</div>
	<div class="tools-bar">
		<div class="label">tilt:</div>
		<button id="tilt-add">+</button>
		<input type="text" id="tilt" value="70">
		<button id="tilt-minus">-</button>
	</div>
	<div class="tools-bar">
		<button id="loop">loop</button>
		<button id="stop">stop</button>
	</div>
</div>
<script>
  // 按住鼠标右键，修改倾斜角和角度
  var map = new BMapGL.Map("allmap");    // 创建Map实例
  var point = new BMapGL.Point(114.92,27.81);
  map.centerAndZoom(point, 19);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
  map.setHeading(40);   // 设置地图旋转角度
  map.setTilt(70);       // 设置地图的倾斜角度
  var heading = document.getElementById('heading');
  var headingAdd = document.getElementById('heading-add');
  var headingMinus = document.getElementById('heading-minus');
  var tilt = document.getElementById('tilt');
  var tiltAdd = document.getElementById('tilt-add');
  var tiltMinus = document.getElementById('tilt-minus');
  heading.addEventListener('input', function(e) {
    map.setHeading(e.target.value);
  });
  tilt.addEventListener('input', function(e) {
    map.setTilt(e.target.value);
  });
  headingAdd.addEventListener('click', function(e) {
    heading.value++;
    map.setHeading(heading.value);
  });
  headingMinus.addEventListener('click', function(e) {
    heading.value--;
    map.setHeading(heading.value);
  });
  tiltAdd.addEventListener('click', function(e) {
    tilt.value++;
    map.setTilt(tilt.value);
  });
  tiltMinus.addEventListener('click', function(e) {
    tilt.value--;
    map.setTilt(tilt.value);
  });
  var task;
  document.getElementById('loop').addEventListener('click', function(e) {
    task = setInterval(() => {
      if (loop) {
        heading.value++;
        map.setHeading(heading.value);
      }
    }, 100);
  });
  document.getElementById('stop').addEventListener('click', function(e) {
    task && clearInterval(task);
  })
</script>
</body>
</html>
